Layui快速入门之第八节表格渲染与属性的使用

您所在的位置：网站首页 › layui 渲染表格中 ui报错 › Layui快速入门之第八节表格渲染与属性的使用

Layui快速入门之第八节表格渲染与属性的使用

2024-02-24 09:06| 来源: 网络整理| 查看: 265

一：表格的渲染

API

方法配置渲染

模板配置渲染

静态表格渲染

二：表格的属性

基础属性

异步属性

返回数据中的特定字段

表头属性

重载

完整重载

仅数据重载 2.7+

获取选中行

设置行选中状态 2.8+

获取当前页接口数据

获取表格缓存数据集

重置尺寸

导出数据

获取配置项 2.8+

设置列显示或隐藏 2.8+

一：表格的渲染 API API描述var table = layui.table获得 table 模块。table.render(options)table 组件渲染，核心方法。table.init(filter, options)初始化渲染静态表格。table.reload(id, options, deep)表格完整重载。table.reloadData(id, options, deep) 2.7+表格数据重载。table.checkStatus(id)获取选中行相关数据。table.setRowChecked(id, opts) 2.8+设置行选中状态。table.getData(id)获取当前页所有行表格数据。table.cache获取表格缓存数据集（包含特定字段）。table.resize(id)重置表格尺寸。table.exportFile(id, data, opts)导出表格数据到本地文件。table.getOptions(id) 2.8+获取表格实例配置项。table.hideCol(id, cols) 2.8+设置表格列的显示隐藏属性。table.on('event(filter)', callback)table 相关事件。

渲染

table 提供了以下三种渲染模式，在实际使用时，一般按情况选择其中一种即可。

渲染方式描述方法配置渲染通过 table 组件提供的核心方法 table.render(options) 完成的渲染。推荐模板配置渲染通过标签的 lay-options="{}" 属性定义模板，组件自动对其进行解析并完成渲染。静态表格渲染对一段已经包含数据内容的静态表格进行动态化转换，使其具备 table 组件的相关功能。方法配置渲染

table.render(options);

参数 options : 基础属性配置项。#详见属性

该方法返回当前实例对象，包含可操作当前表格的一些成员方法。

layui.use(function(){ var table = layui.table; // 渲染，并获得实例对象 var inst = table.render({ elem: '#test', // 绑定元素选择器 // 其他属性 // … }); // 实例对象成员 inst.config; // 当前表格配置属性 inst.reload(options, deep); // 对当前表格的完整重载。参数 deep 表示是否深度重载。 inst.reloadData(options, deep); // 对当前表格的数据重载。参数 deep 同上。 inst.resize(); // 对当前表格重新适配尺寸 inst.setColsWidth() // 对当前表格重新分配列宽 }) 模板配置渲染

在元素中直接书写 lay-options="{}" 属性，组件将自动对其进行解析并完成渲染。

Title

2.8 之前版本通过 lay-data="{}" 定义属性配置项； 2.8+ 版本推荐采用 lay-options，但同时兼容 lay-data。

静态表格渲染

table.init(filter, options);

参数 filter : 元素对应的 lay-filter 属性值参数 options : 基础属性配置项。#详见属性

该方法用于将已输出在页面中的静态表格内容转换为动态 table 组件

表格内容 layui.use(function(){ var table = layui.table; // 将静态表格进行动态化 table.init('test', { height: 366, // 其他属性 // … }); });

二：表格的属性

属性是指 table 渲染、重载时的配置选项（options），它本身是一个 object 参数。如：

// 渲染 table.render({ // options elem: '', cols: [[]], // … }); // 重载 table.reload(id, { // options }); 若为模板配置渲染，则 lay-options 或 lay-data 的属性值即为属性的配置选项（： …

table 的属性众多，我们大致分为以下几种：

属性类别描述基础属性-异步属性用于和异步数据请求相关的基础属性，由于相关属性成员较多，所以单独提取介绍。表头属性基础属性 cols 的子属性集。基础属性属性名描述类型默认值elem绑定原始 table 元素，方法渲染方式必填。string/DOM-

url

发送异步请求的 URL。更多异步相关属性见 : #异步属性

cols

表头属性集，通过二维数组定义多级表头。方法渲染时必填。更多表头属性见 : #表头属性

array-data

直接赋值数据。既适用于只展示一页数据，也能对一段已知数据进行多页展示。该属性与 url 属性只能二选一。

array-id

设定实例唯一索引，以便用于其他方法对 table 实例进行相关操作。若该属性未设置，则默认从 elem 属性绑定的原始 table 元素中的 id 属性值中获取。

string-toolbar

开启表格头部工具栏。支持以下几种值写法：

toolbar: '#template-id' 自定义工具栏模板选择器toolbar: 'xxx 直接传入模板字符toolbar: true 仅开启工具栏右侧，不显示左侧模板toolbar: 'default' 开启工具栏并显示默认模板string boolean

false

defaultToolbar

设置头部工具栏右侧图标。值是一个数组，可选成员有: filter,exports,print （分别代表：筛选图标、导出图标、打印图标）。图标可根据数组值的顺序排列，如：defaultToolbar: ['filter','print','exports'] 支持自定义图标及事件，用法详见示例: #综合演示

array-width设置容器宽度，默认自适应。number-

height

设置表格容器高度，默认自适应。其他可选值的规则如下：

height: 315 设置固定高度height: 'full-30' 设置自适应高度。这是一个特定的语法格式：full 表示铺满；后面的数字表示当前 table 之外的元素占用的高度，如：表格头部到页面最顶部加表格底部距离页面最底部的“距离和”height: '#id-30' 设置相对父元素的高度自适应，其中 #id 即父元素的 ID 选择器，其计算原理和上述 full 相同。number string-maxHeight 2.8+

设置表格容器的最大高度，设置该属性后，height 属性将被认定为默认的自适应值。

number-cellMinWidth

设置所有普通单元格的最小宽度，一般用于列宽自动分配的情况。其优先级低于表头属性中的 minWidth

number

cellMaxWidth 2.8+

设置所有普通单元格的最大宽度。其优先级低于表头属性中的 maxWidth

number-lineStyle 2.7+

用于定义表格的多行样式，如每行的高度等。该参数一旦设置，单元格将会开启多行模式，且鼠标 hover 时会通过显示滚动条的方式查看到更多内容。请按实际场景使用。示例：lineStyle: 'height: 95px;'

string-className 2.7+用于给表格主容器追加 css 类名，以便更好地扩展表格样式string-css 2.7+

用于给当前表格主容器直接设定 css 样式，样式值只会对所在容器有效，不会影响其他表格实例。如：css: '.layui-table-page{text-align: right;}'

string-escape 2.6+是否开启对内容的编码（转义 html）boolean

true

totalRow是否开启合计行区域string

false

page

用于开启分页。支持传入 laypage 组件的基础属性（jump,elem 除外）

boolean object

false

pagebar 2.7+

用于开启分页区域的自定义模板，用法同 toolbar 属性。

string-limit

每页显示的条数。值需对应 limits 参数的选项。优先级低于 page 属性中的 limit 属性。

number

limits每页条数的选择项。array

[10,…,90]

是否显示加载条。若为 false，则在切换分页时，不会出现加载条。必须设置了 url 属性才生效。

boolean

true

scrollPos 2.7+

用于设置重载数据或切换分页时的滚动条位置状态。可选值：

fixed 重载数据时，保持滚动条位置不变reset 重载数据时，滚动条位置恢复置顶default 默认方式，无需设置。即重载数据或切换分页时，纵向滚动条置顶，横向滚动条位置不变。string-editTrigger 2.7+

是用于设定单元格编辑的事件触发方式。如双击: dblclick

string

click

title定义 table 的大标题（在文件导出等地方会用到）string-text自定义文本，如空数据时的异常提示等。object查看默认值autoSort

是否由组件自动进行前端排序。若为 false，则需自主排序，即由后端直接返回排序好的数据。#详细用法

boolean

true

initSort

初始排序状态。用于在数据表格渲染完毕时，按某个字段排序显示。它接受一个 object 类型的值，包含属性有：

field 排序字段。对应 cols 设定的各字段名type 排序方式。可选值 : 'asc','desc',null，即：升序、降序、默认 initSort: {field: 'id', // 按 id 字段排序type: 'desc' // 降序排序}object-skin

设置表格边框风格。可选值：grid|line|row|nob

string

grid

size

设置表格其他尺寸。可选值：sm|md|lg

string

even

是否开启隔行背景。

string

false

before 2.7+数据渲染之前的回调函数。function-

done

数据渲染完毕的回调函数。返回的参数如下：

table.render({done: function(res, curr, count){console.log(res); // 得到当前渲染的数据console.log(curr); // 得到当前页码console.log(count); // 得到数据总量}// … // 其它属性});function-error 2.6+数据请求失败的回调函数。返回两个参数：错误对象、内容。function- 异步属性

异步属性本质也是基础属性，当开启 url 属性时才有效，由于相关属性成员较多，所以单独提取介绍。

属性名描述url

发送异步请求的 URL。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 属性自定义）page 代表当前页码、limit 代表每页数据条数。

method

请求的方式，默认：get

where

请求的其他参数。如：where: {token: 'sasasas', id: 123}

headers

请求的数据头参数。如：headers: {token: 'sasasas'}

contentType

请求的内容编码类型。若要发送 json 内容，可设置：contentType: 'application/json'

dataType 2.7+

请求的数据类型，默认 json。

jsonpCallback 2.7+

设置当 dataType: 'jsonp' 时的回调函数名。

request

用于对默认的分页相关的请求参数 page,limit 重新设定名称。如：

request: {pageName: 'curr', // 页码的参数名称，默认：pagelimitName: 'nums' // 每页数据条数的参数名，默认：limit}

那么请求数据时的参数将会变为 ?curr=1&nums=30

parseData

数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式：

{"code": 0,"msg": "","count": 1000,"data": [{}, {}]}

很多时候，您接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：

{"status": 0,"message": "", "total": 180, "data": {"item": [{}, {}]}}

此时我们可以借助 parseData 回调函数将数据解析并转换为默认规定的格式：

table.render({elem: '',url: '',parseData: function(res){ // res 即为原始返回的数据return {"code": res.status, // 解析接口状态"msg": res.message, // 解析提示文本"count": res.total, // 解析数据长度"data": res.data.item // 解析数据列表};},// … //其他参数});

该函数非常实用

返回数据中的特定字段

在返回的数据中，允许规定某些特定字段，以便 table 组件进行相应的特定解析。

特定字段名描述读写状态LAY_CHECKED当前行的选中状态可读可写LAY_DISABLED当前行是否禁止选择可读可写LAY_INDEX当前行下标。每页重新从零开始计算只读LAY_NUM当前行序号只读LAY_COL当前列的表头属性配置项只读

示例一: 在返回的数据中设置特定字段：

{"code": 0,"count": 1000,"data": [{},{LAY_DISABLED: true}]}

示例二: 在模板中读取特定字段示例：

当前行下标: {{= d.LAY_INDEX }} 当前列的某个表头属性: {{= d.LAY_COL.field }} 表头属性

表头属性是基础属性 cols 的子集，其使用频率甚至超过基础属性本身。

属性名描述类型默认值field

设置字段名。通常是表格数据列的唯一标识

string-title

设置列的标题。

string-fieldTitle 2.8+

设置列的字段标题。该属性在筛选列和导出场景中优先级高于 title 属性

string-width

设置列宽。若不填写，则自动分配；若填写，则支持值为：数字、百分比。如： width: 200 / width: '30%'

number/string-minWidth

设置当前列的最小宽度，一般用于列宽自动分配的情况。其优先级高于基础属性中的 cellMinWidth

number

maxWidth 2.8+

设置当前列的最大宽度。其优先级高于基础属性中的 cellMaxWidth

number-type

设置列类型。可选值有：

normal 常规列，无需设定checkbox 复选框列radio 单选框列numbers 序号列space 空列string

normal

LAY_CHECKED

设置全选状态，当列设置 type: 'checkbox' 时才有效。

boolean

false

fixed

设置固定列，即不跟随 table 横向滚动条而滚动。可选值有：

left 固定在左right 固定在右string-

templet

设置列的自定义模板，核心属性。模板遵循 laytpl 组件语法。

templet 提供了三种使用方式，选择任一用法即可：

设置模版选择器

【本文地址】

公司简介

联系我们

Layui快速入门之第八节 表格渲染与属性的使用

Layui快速入门之第八节表格渲染与属性的使用